<template>
    <div class="myTask">
        <el-dialog
        v-model="dialogVisible"
        title="查看详情信息"
        width="30%"
        :before-close="handleClose"
    >
        <div class="qptk"> 
            <p>流程名称：<el-input v-model="SHtableData[0].date" disabled placeholder="Please input" /></p>
            <p>表名：<el-input v-model="SHtableData[0].name" disabled placeholder="Please input" /></p>
            <p>业务名称：<el-input v-model="SHtableData[0].address" disabled placeholder="Please input" /></p>
            <p>审批状态：<el-input v-model="SHtableData[0].remark" disabled placeholder="Please input" /></p>
            <p>创建人：<el-input v-model="SHtableData[0].founders" disabled placeholder="Please input" /></p>
            <p>创建时间：<el-input v-model="SHtableData[0].creationTime" disabled placeholder="Please input" /></p>
        </div>
        <template #footer>
        <span class="dialog-footer">
            <el-button @click="dialogVisible = false">Cancel</el-button>
            <el-button type="primary" @click="dialogVisible = false">
            OK
            </el-button>
        </span>
        </template>
    </el-dialog>
        <div class="myTask-top">
            <div class="left">
                <el-icon><Grid /></el-icon><span class="span1">审批流程配置</span>
            </div>
            <div class="right">
                <p>
                    <el-select v-model="value" class="m-2" placeholder="审批状态">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    />
                    </el-select>
                </p>
                <p>
                    <el-button type="primary" :icon="Search" @click="searchRemark">查 询</el-button>
                </p>
                <p>
                    <el-button size="default" :icon="Search" @click="ssss">高级查询</el-button>
                </p>
                <p>
                    <el-button type="danger" :icon="Delete" @click="dele">删 除</el-button>
                </p>
                <p>
                    <el-button :icon="Grid" class="jgg"></el-button>
                </p>
            </div>
        </div>
        <div class="myTask-bottom">
            <el-table
            ref="multipleTableRef"
            :data="SHtableData"
            style="width: 100%"
            @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="55" />
                <el-table-column label="流程名称" width="120">
                <template #default="scope">{{ scope.row.date }}</template>
                </el-table-column>
                <el-table-column property="name" label="表名" width="120" />
                <el-table-column property="address" label="业务名称" show-overflow-tooltip />
                <el-table-column property="luange" label="当前审批节点" show-overflow-tooltip />
                <el-table-column property="remark" label="审批状态" show-overflow-tooltip />
                <el-table-column property="founders" label="创建人" show-overflow-tooltip />
                <el-table-column property="creationTime" label="创建时间" show-overflow-tooltip />
                <!-- <el-table-column property="modifier" label="查看" show-overflow-tooltip /> -->
                <el-table-column fixed="right" label="查看" width="120">
                    <template #default="scope">
                        <el-button
                        link
                        type="primary"
                        size="small"
                        @click.prevent="search"
                        >
                        查看详情
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script setup>
import { Search ,Plus,Grid,Delete} from '@element-plus/icons-vue'
import { ref } from 'vue'
import { ElMessageBox,ElMessage } from 'element-plus'

const dialogVisible = ref(false)

const value = ref('')
const input = ref('')
const options = [
    {
        value: '审核中',
        label: '审核中',
    },
    {
        value: '审核通过',
        label: '审核通过',
    },
    {
        value: '审核未通过',
        label: '审核未通过',
    },
    {
        value: '驳回',
        label: '驳回',
    }
]

// 审核表格数据
const SHtableData = ref([
    {
    date: '测试',
    name: 'Demo_Produc',
    address: '产品管理',
    luange: '是',
    remark:'审核中',
    founders:'超级管理员',
    creationTime:'2019-10-15',
    modifier:'',
    modificationTime:'',
    }

])
const arr = ref([])
const handleSelectionChange = (val) => {
    arr.value = val
    return arr.value
}
const Vshow = ref(false)
let dele = () => {
    if (arr.value.length<1) {
        ElMessage('请选择您要删除的选项！')
    }else{
        SHtableData.value.splice(0,1)
    }
}

const search = () => {
dialogVisible.value = true
}
const handleClose = (done) => {
    ElMessageBox.confirm('是否关闭查看详情信息')
        .then(() => {
        done()
        })
        .catch(() => {
        // catch error
        })
}
const searchRemark =() => {
    if (value.value=='') {
        ElMessage('请选择您要查询的审批状态')
    }else{
        if (value.value == '审核中') {
            SHtableData.value = [
                {
                    date: '测试',
                    name: 'Demo_Produc',
                    address: '产品管理',
                    luange: '是',
                    remark:'审核中',
                    founders:'超级管理员',
                    creationTime:'2019-10-15',
                    modifier:'',
                    modificationTime:'',
                    }
            ]
        }else{
            SHtableData.value = []
            ElMessage({
            showClose: true,
            message: '当前暂无该状态项目',
            type: 'warning',
        })
        }
    }
}

const ssss = () => {
        ElMessage({
        showClose: true,
        message: '当前暂无权限访问高级查询',
        })
}
</script>
<style scoped lang='scss'>
.myTask{
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
    outline: none;
    box-sizing: border-box;
    .myTask-top{
        height: 30px;
        line-height: 30px;
        display: flex;
        justify-content: space-between;
        .left{
            width: 110px;
            // background: red;
            border-bottom: 2px solid black;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-left: 20px;
            img{
                width: 16px;
                height: 16px;
                vertical-align: middle;
            }
            span{
                color: black;
                font-weight: bold;
                font-size: 15px;
            }
        }
        .right{
            width: 600px;
            display: flex;
            justify-content: space-evenly;
            .jgg{
                padding: 8px;
            }
        }
    }
    .myTask-bottom{
        margin-top: 20px;
    }
}
.qptk{
    p{
        margin: 10px 0;
    }
}

</style>